<template>
  <div id="m-container">
    <h2>连写形式</h2>
    <details>
      <summary>1</summary>
      <v-btn v-permission.admin:yyy="['xxx', 'yyy', 'zzz']" color="primary">
        期望["admin:yyy:*"]，接收 ['xxx:yyy:zzz']
      </v-btn>

    </details>
    <details>
      <summary>2</summary>
      <v-btn v-permission.admin:xxx:add="['xxx', 'yyy', 'add']" color="primary">
        期望["admin:xxx:add"]，接收 ['xxx:yyy:add']
      </v-btn>

    </details>
    <details>
      <summary>3</summary>
      <v-btn v-permission.admin="['xxx', 'yyy', 'zzz']" color="primary">
        期望["admin.*.*"]，接收 ["xxxx.yyy.zzz"]
      </v-btn>

    </details>
    <details>
      <summary>4</summary>
      <v-btn v-permission.admin.*.add="['admin', '*', 'delete']" color="primary">
        期望["admin.*.add"]，接收 ["admin.*.delete"]
      </v-btn>

    </details>
    <details>
      <summary>5</summary>
      <v-btn v-permission.admin:user:root="['xxx', 'yyy', 'zzz']" color="primary">
        期望["admin.*.add"]，接收 ["admin.*.delete"]
      </v-btn>

    </details>
    <details>
      <summary>6</summary>
      <v-btn v-permission.admin:*:edit.admin:*:add="'xxx:yyy:zzz'" color="primary">
        期望["admin:*:edit" | "admin:*:add"]，接收 ["xxx:yyy:zzz"]
      </v-btn>

    </details>
    <details>
      <summary>7</summary>
      <v-btn v-permission.*:*:add.user:xxxx:yyyy="'xxx:*:add'" color="primary">
        期望["*:*:add" | "user:xxxx:yyyy"]，接收 ["xxx:*:add"]
      </v-btn>

    </details>
    <h2>对象式写法</h2>
    <details>
      <summary>0</summary>
      <v-btn v-permission="[{ 'role': 'xxxx', 'resource': 'yyy', 'permission': 'zzzz' }, { 'permission': 'zzzz' }]"
             color="primary">
        期望["*:*:zzzz"]，接收 ['xxx:yyy:zzz']
      </v-btn>
    </details>
    <details>
      <summary>1.</summary>
      <v-btn v-permission="[{ 'role': 'xxxx' }, { 'permission': 'zzzz' }]" color="primary">
        期望["*:*:zzzz"]，接收 ['xxx:*:*']
      </v-btn>
    </details>
    <details>
      <summary>2.</summary>
      <v-btn v-permission="[{ 'permission': 'zzzz' }, { 'permission': 'xxxx', role: 'admin' }]" color="primary">
        期望["admin:*:xxxx"]，接收 ['*:*:zzzz']
      </v-btn>
    </details>
    <details>
      <summary>3.</summary>
      <v-btn
        v-permission="[{ 'permission': 'zzzz', role: ['admin', 'user'] }, { role: ['root', 'admin'], 'permission': 'zzzz', resource: 'yyy' }]"
        color="primary">
        期望["admin|root:yyy:zzzz"]，接收 ['admin|user:*:zzz']
      </v-btn>
    </details>

    <details>
      <summary>4.</summary>
      <v-btn
        v-permission="[{ 'permission': ['add', 'edit'], role: ['admin', 'user'], resource: ['xxxx'] }, { role: 'admin', 'permission': 'add', resource: '*' }]"
        color="primary">
        期望["admin:*:add"]，接收 ['admin|user:xxxx:add|edit']
      </v-btn>
    </details>

    <details>
      <summary>5</summary>
      <v-btn v-permission="[{ 'permission': 'xxxxx' }, { role: 'admin', 'permission': 'zzzz', resource: 'yyyy' }]"
             color="primary">
        期望["admin:yyyy:zzzz"]，接收 ['*:*:xxxxx']
      </v-btn>
    </details>


    <h2>混合式写法</h2>
    <details>
      <summary>1</summary>
      <v-btn v-permission.xxxx:yyy:dddd="{ 'role': 'xxxx', 'resource': 'yyy', 'permission': 'zzzz' }"
             color="primary">
        期望["xxx:yyy:ddd"]，接收 ['xxx:yyy:zzz']
      </v-btn>
    </details>
    <details>
      <summary>2</summary>
      <v-btn v-permission.xxxx:yyy:dddd="{ 'role': 'xxxx', 'resource': 'yyy', 'permission': 'zzzz' }"
             color="primary">
        期望["admin:yyy:*"]，接收 ['xxx:yyy:zzz']
      </v-btn>
    </details>


    <details>
      <summary>
        点击查看解释
      </summary>
      <pre>
                    <code>
                         /**
                         * 自定义权限指令
                         *
                         *  第一个 * 表示角色 ,第二个 * 表示资源，第三个 * 表示具体权限
                         *
                         *       三指令用法 针对角色和权限的某一权限
                         *
                         *          任意角色都能访问                        *:*:*                                 v-permission.*:*:*="*:*:*"    一般省略,因为这样毫无意义！
                         *          具有 admin 角色才能访问                 admin:*:*                             v-permission.admin:*:*="xxx"
                         *          具有 add 权限才能访问                   *:*:add                               v-permission.*:*:add="*:*:xxx"
                         *          具有 xxx 资源下任意权限                 *:xxx:*                                v-permission.*:blog:*="*:xxx"
                         *          具有 xxx 资源权限同时要有add权限         *:xx:add                              v-permission.admin:blog:add="xxx:yyy:zzz"
                         *
                         *       双指令写法，针对角色和资源 ,省略具体权限
                         *
                         *            某一个角色具有某一资源下所有权限    v-permission.admin:blog.user:blog
                         *
                         *        单指令写法，省略资源和具体权限
                         *            多个角色 连写形式                  v-permission.admin.user.other              admin | user | other  都能访问
                         *
                         *
                         *
                         * 对象式写法
                         *  v-permission="[{ type: 'serve', role: [], resource: [], permission: [] }, { type: 'expect', role: ['admin'], resource: [], permission: ['add'] }]"
                         *  参数说明: type 指定为说明类型，默认可以不指定，第一个式前端接受类型，第二个期望式什么类型
                         *                 - 如果指定了类型，两个类型不能一致！，否则会覆盖！
                         *                 - expect  期望类型
                         *                 - serve   从服务端接受的权限
                         *            role: 角色
                         *                 - 如果是一个字符串，可以省略 ["admin"] => "admin"
                         *                 - 多个角色使用数组形式 ["admin","user"]
                         *                 - 如果省略,默认式为 *
                         *            resource: 资源
                         *                 - 同上
                         *            permission: 具体权限
                         *                 - 同上
                         *
                         *
                         * 混合式写法
                         *
                         * 参考上面两种方式
                         * 只能通过  v-permission.xxxx:yyyy:zzz="{role: aaa, resource: bbbb, permission: cccc }"
                         * - role,resource,permission 省略表示 *
                         *
                         *
                         * 判断依据
                         *    - 如果不指定对应资源默认值，初始化设置为 "*"
                         *    - 如果一个资源权限对应设置为 "*",对于期望值来说，可以放行任意权限，对于服务器接收数据来说，表示具有任意权限
                         *         - 例如 ["admin:*:*"] === ["*":"*":"add"] = >true
                         *         - 例如 ["*:*:add"] ===   ["user":"*":"add"] = >true
                         *         - 例如 ["*:*:add"] ===   ["user":"*":"delete"] = >false
                         *         - 例如 ["*:account:add"] ===   ["user":"picture":"add"] = >false
                         *
                         */

                    </code>
               </pre>
    </details>

  </div>
</template>
<style lang="scss" scoped>
ul {
  padding: 20px;

  li {
    list-style: none !important;
  }

  a {
    font-size: 44px;

  }

  a:hover {
    color: teal;
    text-decoration: underline;
  }
}
</style>
<script setup lang="ts">
</script>
